<template>
  <div>
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
            :default-adctive="this.$router.path"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo asidebar"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            router
        >

          <el-menu-item index="/test/home">
            <el-icon>
              <HomeFilled/>
            </el-icon>
            <span>首页</span>
          </el-menu-item>

          <!--<el-sub-menu index="2">-->
          <!--  <template #title>-->
          <!--    <el-icon>-->
          <!--      <User/>-->
          <!--    </el-icon>-->
          <!--    <span>用户管理</span>-->
          <!--  </template>-->
          <!--  <el-menu-item index="/test/user">修改用户信息</el-menu-item>-->
          <!--</el-sub-menu>-->

          <el-menu-item index="/test/class">
            <template #title>
              <el-icon>
                <OfficeBuilding/>
              </el-icon>
              <span>班级管理</span>
            </template>
          </el-menu-item>

          <el-menu-item index="/test/paper">
            <template #title>
              <el-icon>
                <Notebook/>
              </el-icon>
              <span>组卷管理</span>
            </template>
          </el-menu-item>

          <!--<el-sub-menu  index="6">-->
          <!--  <template #title>-->
          <!--    <el-icon><Mouse /></el-icon>-->
          <!--    <span>考试管理</span>-->
          <!--  </template>-->
          <!--<el-menu-item index="/test/testing">正常考试</el-menu-item>-->
          <!--<el-menu-item index="/test/passtest">历史考试</el-menu-item>-->
          <!--<el-menu-item index="/test/completedExam">考试管理</el-menu-item>-->
          <!--</el-sub-menu>-->

          <!--<el-sub-menu index="5">-->
          <!--  <template #title>-->
          <!--    <el-icon><Files /></el-icon>-->
          <!--    <span>考试管理</span>-->
          <!--  </template>-->
          <!--  <el-menu-item index="/test/completedExam">-->
          <!--    <template #title>-->
          <!--      <el-icon>-->
          <!--        <Reading/>-->
          <!--      </el-icon>-->
          <!--      <span>正常考试管理</span>-->
          <!--    </template>-->
          <!--  </el-menu-item>-->
          <!--  <el-menu-item index="/test/historyExam">-->
          <!--    <template #title>-->
          <!--      <el-icon>-->
          <!--        <Reading/>-->
          <!--      </el-icon>-->
          <!--      <span>历史考试管理</span>-->
          <!--    </template>-->
          <!--  </el-menu-item>-->
          <!--</el-sub-menu>-->
          <el-menu-item index="/test/completedExam">
            <template #title>
              <el-icon>
                <Reading/>
              </el-icon>
              <span>考试管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/test/punish">
            <el-icon>
              <Stamp/>
            </el-icon>
            <span>舞弊公示</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "",
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.el-menu-item {
  height: 60px;

}

.el-menu {
  border-right: 0;
  /* 设计89%屏幕高度*/
  height: 89vh;
}

i {
  padding-right: 10px;
}

.subgroup {
  padding-left: 40px;
}

.tac {
  height: 100%;
  background-color: #545c64;
}

</style>
